<template>
<!-- 详情页底部 -->
  <div class="detail-bottom">
    <div class="am-flexbox-item">
      <img
        v-if="isFavoate"
        src="http://liufusong.top:8080/img/star.png"
        alt=""
        class="house-detail-favorite-img"
        @click="delFavoate"
      />
      <img
        v-else
        src="http://liufusong.top:8080/img/unstar.png"
        alt=""
        class="house-detail-favorite-img"
        @click="postFavoate"
      />
      <span class="house-detail-favorite"> 收藏</span>
    </div>
    <div class="am-flexbox-item">在线咨询</div>
    <div class="am-flexbox-item house-detail-telephone">
      <span>电话预约</span>
    </div>
  </div>
</template>

<script>
import {
  deleteUserFavoritesIdAPI,
  postUserFavoritesIdAPI,
  getUserFavoritesIdAPI
} from '@/api'
export default {
  name: 'DetailBottom',
  data() {
    return {
      isFavoate: false
    }
  },
  created() {
    this.getUserFavoritesId()
  },
  methods: {
    // 是否收藏
    async getUserFavoritesId() {
      const { body } = await getUserFavoritesIdAPI(this.$route.params.houseCode)
      this.isFavoate = body.isFavorite
    },
    // 取消收藏
    async delFavoate() {
      this.$toast.loading({
        message: '正在取消，请稍等...',
        forbidClick: true
      })
      await deleteUserFavoritesIdAPI(this.$route.params.houseCode)
      this.$toast('已取消收藏')
      this.isFavoate = false
    },
    // 添加收藏
    async postFavoate() {
      this.$toast.loading({
        message: '正在添加，请稍等...',
        forbidClick: true
      })
      await postUserFavoritesIdAPI(this.$route.params.houseCode)
      this.$toast.success('以添加至收藏')
      this.isFavoate = true
    }
  }
}
</script>

<style scoped lang="less">
.detail-bottom {
  display: flex;
  border-top: 1px solid #cecece;
  text-align: center;
  font-size: 17px;
  color: #999;
  background-color: #fff;
  .am-flexbox-item {
    box-sizing: border-box;
    flex: 1 1;
    min-width: 10px;
    border-left: 1px solid #e8e8e9;
  }
  .house-detail-favorite-img {
    width: 16px;
  }
  .house-detail-telephone {
    background-color: #21b97a;
    span {
      color: #fff;
    }
  }
}
</style>
